/*-------------------   外部导入   -------------------------------------------------------------------*/
import type { ColumnsType } from 'antd/es/table';
import {
  useSearchParams,
  NavLink,
  useNavigate,
  useLocation
} from "react-router-dom";
import React from "react";
import { Card, Button, Row, Col, Input ,Select,Table } from "antd";
import { useState, useEffect } from "react";
// 导入接口
import {
    getCarFee,  // 获取费用信息
} from "../../../api/admin";
// 字体图标
import { PlusOutlined, SearchOutlined, RedoOutlined,CloseOutlined } from "@ant-design/icons";

/*-------------------   外部导入   -------------------------------------------------------------------*/


function listCarFee() {
    /*-------------------   定义数据   -------------------------------------------------------------------*/
    // 获取路由信息
    const location:any = useLocation().search;
    const ind: any = location.indexOf("&");
    const idx_name_qm: any = location.indexOf("&carNum=");
    const idx_areaNum_qn: any = location.indexOf("&areaNum=");
    const idx_num_qn: any = location.indexOf("&num=");
    const id = location.slice(7, ind);
    const [listFee,setListFee] = useState()
    const navigate = useNavigate();
    // url里的carNum值
    const carNum = location.slice(idx_name_qm+8,idx_areaNum_qn);
    const areaNum = decodeURI(location.slice(idx_areaNum_qn+9,idx_num_qn));
    const num = location.slice(idx_num_qn+5)
    
    // 表格标题--10个
    const columns: ColumnsType<DataType> = [
        {
            title: '费用项目',
      dataIndex: 'feeName',
      key:"feeName"
    },
    {
      title: '费用标识',
      dataIndex: 'feeFlagName',
      key:"feeFlagName"
    },
    {
      title: '费用类型',
      dataIndex: 'feeTypeCdName',
      key:"feeTypeCdName"
    },
    {
      title: '应收金额',
      dataIndex: 'amountOwed',
      key:"amountOwed"
    },
    {
      title: '建账时间',
      dataIndex: "startTime",
      key:"startTime"
    },
    {
      title: '计费起始时间',
      dataIndex: 'ownerName',
      key:"ownerName"
    },
    {
      title: '计费结束时间	',
      dataIndex: 'startTime',
      key:"areaNum"
    },
    {
      title: '说明',
    //   单价squarePrice ，固定价feePrice 
      dataIndex: 'squarePrice',
      key:"squarePrice"
    },
    {
      title: '状态	',
      dataIndex: 'stateName',
      key:"stateName"
    },
    {
      title: '操作',
      dataIndex: 'carId',
      key:"carId",
      render:(carId,carNum)=><div>
      <span style={{color:"#0055de"}} size="small" onClick={()=>{
        console.log(carId,carNum);
        navigate("/pages/property/payFeeOrder?feeId="+carNum.feeId)
        }}>缴费</span>&ensp;

        <span style={{ color: "#0055de" }} size="small" onClick={() => {
          console.log(carId, carNum);
          navigate("/pages/property/propertyFee?feeId=" + carNum.feeId)
        }}>历史</span>&ensp;

      <span style={{color:"#0055de"}} size="small">取消</span>&ensp;
      <span style={{color:"#0055de"}} size='small'>变更</span>&ensp;
      <span style={{color:"#0055de"}} size='small'>详情</span>&ensp;
  </div>
    },
  ];
    /*-------------------   定义数据   -------------------------------------------------------------------*/
    
    useEffect(()=>{
        const obj = {
            page: 1,
            row: 10,
            communityId: 2023032658120002,
            payerObjId: id,
        }
        getCarFee(obj)
        .then(res=>{
            console.log(res.data.fees)
            setListFee(res.data.fees)
        })
    },[])



  return <div className="listCarFee">
    <Card title={carNum+"费用("+areaNum+"停车场"+num +"车位)" } extra={
        <div>
            <Button type="primary" icon={<PlusOutlined />}>创建费用</Button>&emsp;
            <Button type="primary" icon={<CloseOutlined />}>返回</Button>
        </div>
    }>
    <Table columns={columns} dataSource={listFee} size="middle"/>

    <div className="text" style={{marginTop:"-40px",color:"#676a6c",fontSize:"14px"}}>
        <p>注意： 计费结束时间 “-” 表示未到计费时间 或 收费已结束</p>
        <p>应收金额 为-1 一般为费用项公式设置出错请检查</p>
    </div>
    </Card>
  </div>;
}

export default listCarFee;
